<template lang="html">
  <div v-loading="loading">
    <div class="tab1">
        <div class="title">商品信息</div>
            <div class="form">
                <div class="form_item">
                    <span> <i>*</i> 商品名称</span>
                    <el-input v-model="form.commodityName"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 商品价格</span>
                    <el-input type="number" v-model="form.price"></el-input>
                    <span style="margin-left:10px;">元</span>
                </div>
            </div>

            <div class="form2">
                <div class="form_title">
                  <span> <i>*</i> 商品图片</span>
                </div>
                <div class="form_img">
                  <div class="images">
                    <el-upload action="" class="up_img" :auto-upload="false" :file-list="goodsMainImageUrl" list-type="picture-card" :on-remove="handlePreviewMainRemove" :on-change="handlePreviewMain">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <p>首页主图</p>
                  </div>
                  <div class="images">
                    <el-upload action="" class="up_img2" :limit="3" :auto-upload="false" :file-list="detailImageUrl" list-type="picture-card" :on-remove="handlePRemove" :on-change="handlePreview">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                  </div>
                </div>

            </div>

            <div class="form2">
                <div class="form_title">
                  <span> <i>*</i> 详情描述</span>
                </div>
                <div class="rich_text">
                  <tinymce :tinymceHtml.sync="form.content" />
                </div>
            </div>

            <div class="submit_form">
                <el-button type="primary" :disabled="loading" size="medium" @click="submit">提交</el-button>
            </div>


        </div>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      form:{},
      goodsMainImageUrl:[],
      detailImageUrl:[],
    }
  },
  computed:{
    queryId: function(){
      return this.$route.query.id
    },
  },
  created(){
    if(this.queryId){
      this.selectActivityMainCommodity();
    }
  },
  methods:{
    selectActivityMainCommodity(){
      this.loading = true;
      this.$http.selectActivityMainCommodity({
        id: this.queryId
      }).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$set(this.form,'commodityName', res.data.data.commodityName);
          this.$set(this.form,'price', res.data.data.price);
          this.$set(this.form,'content', res.data.data.content);
          let pics = res.data.data.pics;
          pics.forEach(item=>{
            if(item.type == 1){
              this.goodsMainImageUrl.push({url:item.picUrl});
            }else{
              this.detailImageUrl.push({url:item.picUrl});
            }
          });

        }
      });
    },

    submit(){
      if(!this.form.commodityName){
        this.$message.error('请输入商品名称！！');
        return false;
      }
      if(!this.form.price){
        this.$message.error('请输入商品价格！！');
        return false;
      }
      if(this.goodsMainImageUrl.length == 0){
        this.$message.error('请上传主图！！');
        return false;
      }
      this.form.content = tinyMCE.activeEditor.getContent();
      if(!this.form.content){
        this.$message.error('请输入商品详情！！');
        return false;
      }
      let detailUrl = [];
      this.detailImageUrl.forEach(item=>{
        detailUrl.push(item.url);
      });
      let data = {
        commodityName: this.form.commodityName,
        price: this.form.price,
        mainUrl: this.goodsMainImageUrl[0].url,
        detailUrls: detailUrl.join(','),
        content:this.form.content
      };

      this.insertCommodity(data);
    },
    async insertCommodity(data){
      this.loading = true;
      let res = null;
      if(this.queryId){
        data.id = this.queryId;
        res = await this.$http.updateActivityMainCommodity(data);
      }else{
        res = await this.$http.insertActivityMainCommodity(data);
      }
      this.loading = false;
      if(res.data.code == 0){
        this.$message.success(res.data.message);
        this.$router.back();
      }else{
        this.$message.error(res.data.message);
      }
    },

    handlePreviewMainRemove(){
      this.goodsMainImageUrl = [];
    },
    handlePreviewMain(file){
      let formdata = new FormData();
      formdata.set('file', file.raw);
      this.loading = true;
      this.$http.activityUploadImg(formdata).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.goodsMainImageUrl.push({url: res.data.data});
          this.$message.success('上传成功');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handlePRemove(file){
      this.detailImageUrl = this.detailImageUrl.filter(item=>item.uid != file.uid);
    },
    handlePreview(file,fileList){
      let formdata = new FormData();
      formdata.set('file', file.raw);
      this.loading = true;
      this.$http.activityUploadImg(formdata).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.detailImageUrl.push({
            uid: file.uid,
            url: res.data.data
          });
          this.$message.success('上传成功');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
  }
}
</script>

<style lang="css" scoped>
i{font-style: normal}
.tab1{
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #E8E8E8;
}
.form{
  width: 38%;
  padding: 20px 0 0;
  margin-left: 50px;
}
.form .form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.form .form_item span{
  font-size: 13px;
  color: #333333;
  margin-right: 10px
}
.tab1 i{
  color: #FB3F3F;
}
.form_item .el-input{
  width: 200px
}
.title{
  width: 100%;
  color: #4196FF;
  padding: 12px 15px;
  background-color:#DAEBFF;
  box-sizing: border-box;
}
.form2 .form_title{
  font-size: 13px;
  color: #333333;
  margin-right: 10px;
  line-height: 60px;
  height: 40px;
  margin-left: 50px
}
/deep/.el_form .el-form-item__content{
  margin-left: 50px;
  display: flex;
  align-items: center
}
.form_img{
  display: flex;
  padding-bottom: 25px;
}
.el_form .el_select{
  margin-right: 10px;
}
.el_form .el_input{
  margin-right: 10px;
  width: 150px
}
.el_form .el-select{
  width: 140px;
}
.upload_img{
  width: 50px;
  height: 50px;
  overflow: hidden;
  margin-right: 10px;
}
/deep/.upload_img .el-upload-list--picture-card .el-upload-list__item{
  display: block;
  width: 100%;
  height: 100%
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail{
  width: 100%;
}
/deep/.upload_img .el-upload{
  width: 50px;
  height: 50px;
  line-height: 60px;
}
.images{
  margin-left: 50px;
  margin-top: 10px;
  display: inline-block;
  position: relative;
  text-align: center
}
.images p{
  font-size: 12px;
  color: #999;
  line-height: 25px;
  position: absolute;
  bottom: -25px;
  width: 100%
}
.up_img{
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.up_img2 {
  height: 100px;
}
/deep/.up_img2 .el-upload--picture-card{
  width: 100px;
  height: 100px;
  line-height: 110px;
}
/deep/.up_img2 .el-upload-list--picture-card .el-upload-list__item{
  width: 100px;
  height: 100px;
}
/deep/.up_img .el-upload-list--picture-card .el-upload-list__item{
  display: block;
  width: 100%;
  height: 100%
}
/deep/.up_img .el-upload{
  width: 100px;
  height: 100px;
  line-height: 110px;
}
.rich_text{
  width: 1000px;
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.submit_form{
  margin-top: 20px;
  text-align: center;
  margin-bottom: 30px;
}
</style>
